<template>
  <div class="c-ibmbox2d" :style="getCabinetStyle()">
    <el-tooltip effect="customized" :visible-arrow="true">
      <template #content>
        <div v-html="getTopTHML()" style="background: white; padding: 6px; border-radius: 4px" :class="getCabinetClass()"></div>
      </template>

      <div class="c-ibm-top" @dblclick="clearAllActivedDevices()">
        <PilotLamp :warning="cabinet.warning" @dblclick="clearAllActivedDevices()"  style="float: right"/>
        编号:{{ cabinet.name }}
      </div>
    </el-tooltip>
    <div class="c-ibm-content">
      <div class="c-ibm-scaffold" v-for="i in level">
        {{ level - i + 1 }}
      </div>
      <!-- :content="getTHML(item)" -->
      <!-- raw-content -->
      <template v-for="item in base" >
        <el-tooltip v-if="item.start>0" placement="bottom" :offset="-4" :visible-arrow="true" effect="customized">
          <template #content>
            <div style="background: white; padding: 12px; border-radius: 4px" :class="getCabinetDeviceClass(item)">
              <p>设备ID: {{ item.id }}</p>
              <p>设备名称：{{ item.name }}</p>
              <p>设备型号：{{ item.model }}</p>
              <p>IP地址: {{ item.ip }}</p>
              <p>负责人：{{ item.user }}</p>
              <p>设备用途：{{ item.use }}</p>
              <p>告警信息：{{ item.errors }}</p>
              <el-link type="primary" style="margin-right: 20px" @click.stop="showAssetContent(item)"> 查看资产</el-link>
              <el-link v-if="item.whetherToMonitor ==='1'" type="success" @click.stop="showAssetMonitor(item)">查看监控</el-link>
              <el-link v-else type="info" disabled>查看监控</el-link>
            </div>
          </template>
  
          <div @dblclick="deviceActived(item)" class="c-ibm-device" :data-pos="item.start + '-' + item.height"
               :style="{ bottom: item.start * deviceHeight - deviceHeight + 'px', height: (item.height||1) * deviceHeight + 'px',backgroundColor: (item.color? item.color :'#999') }">
            <div class="c-ibm-device-wrapper">
              <PilotLamp :warning="item.warning" style="float: right; margin: 1px 0 1px 0;cursor:pointer;" size="mini"
                         @defClick="showAssetContent(item)"/>
              <span>{{ item.name + '-' + (item.ip? item.ip:item.model)  }}</span>
            </div>
  
          </div>
        </el-tooltip>
      </template>
    </div>

    <div class="c-ibm-tail" :style="getCabinetTailStyle()">
      <template v-for="item in base" >
        <el-tooltip v-if="item.start<=0" placement="bottom" :offset="4" :visible-arrow="true" effect="customized">
          <template #content>
            <div style="background: white; padding: 12px; border-radius: 4px" :class="getCabinetDeviceClass(item)">
              <p>设备ID: {{ item.id }}</p>
              <p>设备名称：{{ item.name }}</p>
              <p>设备型号：{{ item.model }}</p>
              <p>IP地址: {{ item.ip }}</p>
              <p>负责人：{{ item.user }}</p>
              <p>设备用途：{{ item.use }}</p>
              <p>告警信息：{{ item.errors }}</p>
              <el-link type="primary" style="margin-right: 20px" @click.stop="showAssetContent(item)"> 查看资产</el-link>
              <el-link v-if="item.whetherToMonitor ==='1'" type="success" @click.stop="showAssetMonitor(item)">查看监控</el-link>
              <el-link v-else type="info" disabled>查看监控</el-link>
            </div>
          </template>
  
          <div @dblclick="deviceActived(item)" class="c-ibm-device" :data-pos="item.start + '-' + item.height"
               :style="{ bottom: -item.start * tailDeviceHeight + 'px', height: tailDeviceHeight + 'px',backgroundColor: (item.color? item.color :'#999') }">
            <div class="c-ibm-device-wrapper">
              <PilotLamp :warning="item.warning" style="float: right; margin: 1px 0 1px 0;cursor:pointer;" size="mini"
                         @defClick="showAssetContent(item)"/>
              <span>{{ item.name + '-' + (item.ip? item.ip:item.model)  }}</span>
            </div>  
          </div>
        </el-tooltip>
      </template>
    </div>
    <ModalController ref="modalController"/>
  </div>
</template>
<script lang="ts">
import {defineComponent, ref, watch} from 'vue';
import {propTypes} from '/@/utils/propTypes';
import {PilotLamp} from '/@/components/PilotLampMore';
import ModalController from './ModalController.vue';

const ACTIVE_COLOR = 'rgba(140, 240, 240, 0.693)';
const ACTIVE_COLOR_R = 'rgba(245, 234, 28, 0.554)';
const ACTIVE_COLOR_C = '#17F308';
const UNACTIVE_COLOR = '#999';
let STORAGE_COUNT = 0;
export default defineComponent({
  name: 'Ibm2d',
  components: {PilotLamp, ModalController},
  props: {
    level: propTypes.integer,
    base: propTypes.object,
    cabinet: propTypes.object,
  },
  setup() {
  },
  data() {
    return {
      deviceHeight: 17,
      tailDeviceHeight: 20,
      activedDevice: null,
      tailDeviceCount : -1
    };
  },
  methods: {
    /**
     * 获得存储的开始位置
     * */
    getStorageStartPos(){
      return STORAGE_COUNT ++;
    },
    showAssetContent(item) {
      this.$refs.modalController.showInfo(item);
      //根据资源类型deviceType显示不同的modal
      //网络资源
      //计算资源
      //储存资源
    },
    clearAllActivedDevices(){
      this.$emit('clearActivedDevices');
    },
    deviceActived(item) {
      this.activedDevice = item;
      //"cabinetId":"1669242340583272451"
      // console.log('ITEM');
      // console.log(item);
      if(!item.tag && !item.extend){
        this.$emit('deviceChanged',item);
        return;
      }
      this.$emit('deviceChanged',item);
      item.color = ACTIVE_COLOR_C;
    },
    showAssetMonitor(item) {
      //监控MOD
      this.$refs.modalController.showJK(item);
    },
    getTopTHML() {
      if (this.cabinet.warning === -1) {

        return (
          `<p>机柜编号：` +
          this.cabinet.name +
          `</p>
        <p>机柜备注：` +
          (this.cabinet.remarks ? this.cabinet.remarks : '') +
          `</p>
        <p>是否有告警
        <span style='color:#409eff;padding:0 1em;'>无</span>`
        );

      } else {

        return (
          `<p>机柜编号：` +
          this.cabinet.name +
          `</p>
        <p>机柜备注：` +
          (this.cabinet.remarks ? this.cabinet.remarks : '') +
          `</p>
        <p>是否有告警
        <span style='color:#e6a23c;padding:0 1em;'>有</span></p>`
        );

      }
    },
    getTHML(item) {
      let html = `<p>设备名称：${item.name}</p>
        <p>设备型号：${item.model}</p>
        <p>IP地址：${item.ip}</p>
        <p>负责人：${item.user}</p>
        <p>设备用途：${item.use}</p>
        <p>告警信息：${item.errors}`;
      if (item.errs && item.errs.length) {
        for (let index = 0; index < item.errs.length; index++) {
          const e = item.errs[index];
          html += `<span style='color:#409eff;padding:0 1em;'>${e}</span>`;
        }
      } else {
        html += `无`;
      }
      html += `</p>`;
      return html;
    },
    getCabinetDeviceClass(item) {

      if(item.errors && item.errors.length){
        return "lv4";
      }
      return "lv0";
    },
    getCabinetClass() {
      if(this.cabinet.warning === -1){
        return "lv0";
      }
      return "lv4";
    },
    getCabinetStyle(){
      return "height:790px;"
    },
    getCabinetTailStyle(){
      let iCount = 0;
      for(let i=0;i<this.$props.base.length;i++){
        if(this.$props.base[i].start<=0){
          iCount++;
        }
      }
      this.tailDeviceCount = iCount;
      return "height:" + (iCount * this.tailDeviceHeight +4) +"px;"
    }
  },
});
</script>
<style lang="less">
.c-ibmbox2d {
  /** float: left; **/
  width: 220px;
  margin: 0 auto;
  padding: 1px 0 1px 0;
  /** border: 1px solid #999; **/
  font-size: 12px;
  /** line-height: 24px; **/
  background-color: #fff;

  .c-ibm-top {
    border: 1px solid #999;
    padding: 0 0 0 1em;
    line-height: 24px;
  }

  img {
    width: 100%;
    margin: 0;
  }

  .c-ibm-content {
    position: relative;
    padding: 2px 0 2px 0;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
  }

  .c-ibm-tail {
    position: relative;
    padding: 2px 0 2px 0;
    margin-top: 6px;
    border-top: 1px solid #0a06f7;
    border-left: 1px solid #0a06f7;
    border-right: 1px solid #0a06f7;
    border-bottom: 1px solid #0a06f7;    
  }

  .c-ibm-scaffold {
    font-size: 12px;
    line-height: 17px;
    height: 17px;
    margin: 0 0 0 -2em;
  }

  .c-ibm-device {
    position: absolute;
    left: 0;
    right: 0;
    font-size: 9px;
    /**background-color: #999;*/
    box-sizing: border-box;
    border-bottom: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 2px 4px 2px;
    /**color:rgba(245, 234, 28, 0.554)**/
  }

  .c-ibm-device-wrapper {
    position: absolute;
    font-size: 10px;
    left: 0;
    right: 0;
    text-align: center;
    margin-top: auto;
    margin-left: 4px;

    span{
      font-style: normal;
      font-size: 10px;
      /**height:auto;**/
      display: block;
      text-align: left;
      white-space: pre-wrap;
      word-break:break-all;
    }
  }
}

.el-popper.is-customized {
  /* Set padding to ensure the height is 32px 
  //padding: 6px 12px;
  //background: white;
  //box-shadow: 0 0 16px 3px green;
  */
  border: transparent;
}

.lv0 {
  box-shadow: 2px 2px 2px 2px rgba(125, 245, 50, 0.4);
}

.lv1 {
  box-shadow: 2px 2px 2px 2px rgba(125, 245, 50, 0.4);
}

.lv2 {
  box-shadow: 2px 2px 2px 2px rgba(255, 242, 204, 0.8);
}

.lv3 {
  box-shadow: 2px 2px 2px 2px rgba(255, 191, 0, 0.5);
}

.lv4 {
  box-shadow: 2px 2px 2px 2px rgba(255, 0, 0, 0.3);
}
</style>
